<template>
  <view v-if="showType == 'card'">
    <up-row style="flex-wrap: wrap;">
      <view  v-for="(item, index) in data" :key="index">
        <view class="u-p-r-15 u-p-b-15" v-if="active != index">
          <up-button size="large" @click="checkBtn(item, index)" plain>
            <up-row type="flex">
              <image :src="item.avatar" :style="{ width: '64rpx', height: '64rpx' }" mode="aspectFill" />
              <view class="u-m-l-10">{{ item.name }}</view>
            </up-row>
          </up-button>
        </view>
        <view class="u-p-r-15 u-p-b-15" v-else>
          <up-button type="warning" size="large" plain @click="checkBtn(item, index)">
            <up-row type="flex">
              <image :src="item.avatar" :style="{ width: '64rpx', height: '64rpx' }" mode="aspectFill" />
              <view class="u-m-l-10">{{ item.name }}</view>
            </up-row>
          </up-button>
        </view>
      </view>
    </up-row>
  </view>
  <view v-else>
    <view class="p-b-10" v-if="title">{{ title }}</view>
    <up-row style="flex-wrap: wrap;">
      <view  v-for="(item, index) in data" :key="index">
        <view class="u-p-r-15 u-p-b-15" v-if="active != index">
          <up-button size="small" @click="checkBtn(item, index)" plain>{{ item.name }}</up-button>
        </view>
        <view class="u-p-r-15 u-p-b-15" v-else>
          <up-button type="warning" size="small" plain @click="checkBtn(item, index)">{{ item.name }}</up-button>
        </view>
      </view>
    </up-row>
  </view>
</template>

<script>
export default {
  props: ['title', 'data', 'index', 'showType'],
  computed: {
    active: {
      get() {
        return this.index;
      },
      set(val) {
        this.$emit('update:index', val)
      }
    }
  },
  methods: {
    checkBtn(item, index) {
      console.log(this.active)
      this.active = index
    }
  },
}
</script>

<style lang="scss" scoped>

</style>